<template>
    <!-- 分割符号 -->
<!-- <div class="rt-ft">
  <el-row :gutter="60">
    <el-col :span="24">
      <div class="rt-flex-right">
        <el-button type="primary" @click="handleChangeStatus"
          >{{ currentStatus === "read" ? "编辑" : "取消编辑" }}
        </el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
          v-if="currentStatus === 'edit'"
        >
           保存
        </el-button>
      </div>
    </el-col>
  </el-row>
</div> -->
<el-form
  ref="queryFormRef"
  :inline="true"
  :label-position="fieldOptions.labelPosition || 'right'"
  :label-width="fieldOptions.labelWidth || '100px'"
  :model="currentForm"

  class="rt-query"
  size="small"
>
  <el-row
    v-for="(item, index) in fieldList"
    :key="'row' + index"
    :gutter="60"
  >
    <el-col
      v-for="(item1, index1) in item.children"
      :span="item1.span || 6"
      :offset="item1.offset || 0"
      :key="'col' + index1"
    >
      <el-form-item
        :label="item1.label + item1.labelSuffix || ''"
        :style="{ width: '100%' }"
        v-if="currentStatus === 'read'"

      >
        <div v-if="item1.formType === 'datetimerange'">
          <span>{{ currentForm[item1.field][0] || "" }}</span>
          <span class="datetimerange-mid-suffix">{{ item1.midSuffix }}</span>
          <span>{{ currentForm[item1.field][1] || "" }}</span>
        </div>
        <div v-else>{{ currentForm[item1.field] }}</div>
      </el-form-item>
      <el-form-item
        v-else
        :label="item1.label + item1.labelSuffix || ''"
        :style="{ width: '100%' }"
        :rules="item1.itemRules"
        :prop="item1.field"
      >
        <!-- 输入框 -->
        <el-input
          :style="{ width: '100%' }"
          v-if="item1.formType === 'text'"
          v-model="currentForm[item1.field]"
          :placeholder="item1.placeholder"
          clearable
        />
        <!-- 下拉 -->
        <el-select
          :style="{ width: '100%' }"
          v-else-if="item1.formType === 'select'"
          v-model="currentForm[item1.field]"
          clearable
          placeholder="Select"
        >
          <el-option
            v-for="opItem in item1.options"
            :key="opItem.value"
            :label="opItem.label"
            :value="opItem.value"
          />
        </el-select>
        <!-- 时间 -->
        <el-date-picker
          v-else-if="item1.formType === 'datetimerange'"
          v-model="currentForm[item1.field]"
          type="datetimerange"
          :start-placeholder="item1.startPlaceholder"
          :end-placeholder="item1.endPlaceholder"
        />
        <!-- 自定义插槽 -->
        <slot
          v-else-if="item1.formType === 'solt'"
          :name="item1.soltName"
        ></slot>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
<!-- 展开关闭控制 -->
<!-- 分割符号 -->
<!-- <div class="rt-ft">

  <el-row :gutter="60">
    <el-col :span="24">
      <el-divider border-style="dashed" />
    </el-col>
  </el-row>
</div> -->
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { defineExpose } from "vue";
import { deepClone } from "@/utils";
const emit = defineEmits();
const { proxy } = getCurrentInstance();

// 查询栏目的高度
const height = ref("auto");
const props = defineProps({
fieldOptions: {
  type: Object,
},
fieldForm: {
  type: Object,
},
rules:{
  type: Object,
},
fieldList: {
  type: Array,
},
/**read 只读  edit 编辑   */
status: {
  type: String,
  default: "read",
},
});
const currentForm = ref({});

/**重置表单 */
function resetForm() {
proxy.resetForm("queryFormRef");
}
/**验证表单 */
async function validateForm() {


return await proxy.$refs.queryFormRef.validate(async (valid) => {
        if (valid) {
                } else {
                return false
          }
  })

}

/**改变表单 */
function handleChangeStatus() {
currentStatus.value = currentStatus.value == "read" ? "edit" : "read";
}
/**提交表单 */
function handleSubmit() {
 
emit("submit", currentForm.value);
}

// 当前页面状态
const currentStatus = computed({
get() {
  return props.status;
},
set(val) {
  emit("update:status", val);
},
});

watch(
() => props.fieldForm,
(value) => {
  currentForm.value = deepClone(value);
}
);

watch(
() => currentStatus.value,
(value) => {
  console.log("取消", value, props.fieldForm);
  if (value === "read") {
    currentForm.value = deepClone(props.fieldForm);
  }
}
);
/**点击展开触发高度变化 */
currentForm.value = deepClone(props.fieldForm);

defineExpose({
resetForm,
currentForm,
validateForm
});
</script>

<style lang="scss" scoped>
.rt-query {
padding: 10px 20px;
overflow: hidden;
transition: height 1s;
}

.rt-query-foot-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.btn-box {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
}
.rt-ft {
padding: 0 20px;
.rt-flex-right {
  display: flex;
  flex-direction: row;
  justify-content: end;
}
}
/* 日期组件样式 */
.datetimerange-mid-suffix {
padding: 0 5px;
}
</style>
